import React, { useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { useCity } from '../hooks/useCity';
import { useCinemaList } from '../hooks/useCinema';

export default function Cinema(props) {
  const { cityId, cityName } = useCity();

  const { list } = useCinemaList(cityId);

  const navigate = useNavigate();

  const handleClick = useCallback(() => {
    navigate('/city');
  }, [navigate]);

  return (
    <div>
      <div onClick={handleClick}>{cityName}</div>
      <ul>
        {list.map((item) => {
          return <li key={item.cinemaId}>{item.name}</li>;
        })}
      </ul>
    </div>
  );
}
